<template>
  <div class="container">
    <UserCenterTab selected="DownloadCenter"/>
    <transition-group tag="div">
      <div :key="'DownloadCenter'">
        <h1 style="text-align: center; padding: 50px;"> DownloadCenter </h1>
        <div class="file-list-table">
          <el-table
              :data="tableData.filter(data => !search
                || data.fileType.toLowerCase().includes(search.toLowerCase())
                || data.fileName.toLowerCase().includes(search.toLowerCase())
              )"
              style="width: 80%; margin: 0 auto;">
            <el-table-column align="center" width="100" label="文件序号" prop="fileId"/>
            <el-table-column align="left" label="文件名" prop="fileName"/>
            <el-table-column align="center" width="150" label="文件类型" prop="fileType"/>
            <el-table-column align="center" width="200" label="时间" prop="time"/>
            <el-table-column align="center" width="200">
              <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" @click="handleEdit(scope.$index, scope.row)"/>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" type="myBlue" @click="handleDownLoad(scope.$index, scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import UserCenterTab from "@/components/UserCenter/UserCenterTab";
import tableData from "@/config/file.json"

export default {
  name: "DownloadCenter",
  components: {UserCenterTab},
  data() {
    return {tableData, search: ""};
  },
  methods: {
    handleEdit(e, t) {
      console.log(e, t);
    },
    handleDownLoad(e, t) {
      console.log(e, t);
      const url = "./file/" + t.fileType + "/" + t.fileName;
      window.open(url, "_blank");
    },
  },
}
</script>

<style scoped>
.file-list-table {
  width: 1440px;
  margin: 0 auto;
  padding-bottom: 80px;
}
</style>